<template>
  <div class="sideBox">
    <slide-verify
      ref="slideblock"
      @again="onAgain"
      @fulfilled="onFulfilled"
      @success="onSuccess"
      @fail="onFail"
      :imgs="puzzleImgList"
      @refresh="onRefresh"
      :accuracy="accuracy"
      :slider-text="slideText"
      :l="42"
      :r="10"
      :w="widht"
      :h="height" 
    ></slide-verify>
  </div>
</template>

<script>
import {getSlideSercret,checkSlideSecret} from '@/api/system/registerLoginApi'
import {encrypt} from '@/utils/AESUtils'
export default {
  name: "ImageSlideVerify",
  props:{
    widht:{
      type: Number,
      required: false,
      default: 640
    },
    height:{
      type: Number,
      required: false,
      default: 320
    },
    //为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
    accuracy:{
      type: Number,
      required: false,
      default: 5
    },
    slideText:{
      type: String,
      required: false,
      default: '滑动登录'
    }
  },
  data() {
    return {
      //服务器返回的验证码KEY
      slideSecretKey:"",
      puzzleImgList: [
        require("@/assets/imgs/verify1.png"),
        require("@/assets/imgs/verify2.png"),
        require("@/assets/imgs/verify3.png"),
        require("@/assets/imgs/verify4.png"),
        require("@/assets/imgs/verify5.png"),
        require("@/assets/imgs/verify6.png"),
        require("@/assets/imgs/verify7.png"),
        require("@/assets/imgs/verify8.png"),
        require("@/assets/imgs/verify9.png"),
        require("@/assets/imgs/verify10.png"),
      ]
    };
  },
  created() {
    this.lower();
  },
  methods: {
    // 验证成功，触发该方法
    onSuccess(times) {
      //密码加密
      let value = encrypt(this.slideSecretKey);
      checkSlideSecret(this.slideSecretKey,value)
      .then(success=>{
        this.$emit('slideVerifyResult',true)
      })
      .catch(err=>{
        this.$message.error(err);
        setTimeout(() => {
          this.loadServerSlideSecret();
        }, 3000);
      })
    },
    onFail() {
      this.text = "验证失败";
      this.$message.error("验证失败");
    },
    onRefresh() {
      this.text = "滑动登录";
      this.loadServerSlideSecret();
    },
    onFulfilled() {
      this.text = "滑动登录";
    },
    onAgain() {
      this.text = "操作非法";
      this.$refs.slideblock.reset();
    },
    handleClick() {
      this.$refs.slideblock.reset();
    },
    handleClose() {
      
    },
    lower() {
      this.loadServerSlideSecret();
    },
    loadServerSlideSecret(){
      getSlideSercret()
      .then(data=>{
        this.slideSecretKey = data;
      })
      .catch(err=>{
        this.$message.error(err);
      })
    }
  },
};
</script>
<style lang="scss" scoped></style>
